<!--智能验证-->
<template>
  <div id="__nc">
    <div id="nc" v-if="sliderType == 'slider'"></div>
    <div id="sc" v-if="sliderType == 'intelligence'"></div>
  </div>
</template>
<script>
  export default {
    name: 'slide-check',
    props: {
      sliderType: {
        type: String,
        default() {
          return 'slider'
        }
      },
      // 滑动验证参数
      scene: { // 使用场景标识
        type: String,
        default() {
          return 'renderTo'
        }
      },
      timeout: { // 内部网络请求的超时时间。一般情况建议保持默认值（10000ms）。
        type: Number,
        default() {
          return 10000
        }
      },
      retryTimes: { // 允许服务器超时重复次数，默认5次。
        type: Number,
        default() {
          return 5
        }
      },
      bannerHidden: { // 验证通过后，验证码组件是否自动隐藏，默认不隐藏（false）。
        type: Boolean,
        default() {
          return false
        }
      },
      sliderData: {
        type: Object,
        default() {
          return {
            bannerHidden: false,
            //加载状态提示。
            loading: '加载中...',
            //等待滑动状态提示。
            sliderLabel: '请向右滑动验证',
            //验证通过状态提示。
            checkY: '验证通过',
            //验证失败触发拦截状态提示。
            errorTitle: '非常抱歉，这出错了...'
          }
        }
      }
    },
    data() {
      return {
        jsObj: {
          flexible: '//g.alicdn.com/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js',
          smartCaptcha: '//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js',
          quizCaptcha: '//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js',
          guide: '//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + (new Date()).getTime()
        }
      }
    },
    created() {

    },
    async mounted() {
      let _this = this
      //新版app交互js
        var hm = document.createElement('script')
      switch(this.sliderType) {
        case 'slider': // 滑动
          document.getElementById('nch5') && document.getElementById('nch5').remove()
          hm.src = '//g.alicdn.com/sd/nch5/index.js?t=' + (new Date()).getTime()
          hm.id = 'nch5'
          var s = document.getElementsByTagName('script')[0]
          s.parentNode.insertBefore(hm, s)
          hm.onload = hm.onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
              _this.slideInit()
            }
            hm.onload.onload = hm.onreadystatechange = null //删除事件处理函数。
          }
        break
        case 'intelligence': // 智能
          await _this.initJs(_this.jsObj.flexible) && 
          await _this.initJs(_this.jsObj.smartCaptcha) && 
          await _this.initJs(_this.jsObj.quizCaptcha) &&
          (function () {
            window.loaded = true
            _this.intelligenceInit()
          }())
          document.getElementById('itlcjs') && document.getElementById('itlcjs').remove()
          // var hm = document.createElement('script')
          hm.src = '//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + (new Date()).getTime()
          hm.id = 'itlcjs'
          var s = document.getElementsByTagName('script')[0]
          s.parentNode.insertBefore(hm, s)
          hm.onload = hm.onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
              _this.intelligence()
            }
            hm.onload.onload = hm.onreadystatechange = null //删除事件处理函数。
          }
        break
      }
    },
    methods: {
      async initJs(jsUrl) {
        return await new Promise((resolve) => {
          let script = document.createElement('script')
          let header = document.getElementsByTagName('head')[0]
          script.type = 'text/javascript'
          script.src = jsUrl
          header.appendChild(script)
          script.onload = script.onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
              resolve(true)
            }
            script.onload.onload = script.onreadystatechange = null //删除事件处理函数。
          }
        })
      },
      // 滑动
      slideInit() {
        let _this = this
        var nc_token = [process.env.VUE_APP_IC_KEY, (new Date()).getTime(), Math.random()].join(':')
        var nc = window.NoCaptcha.init({
          //声明滑动验证需要渲染的目标元素ID。
          renderTo: '#nc',
          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: process.env.VUE_APP_IC_KEY,
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: _this.scene,
          //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
          token: nc_token,
          //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
          trans: {
            'key1': 'code0'
          },
          //语言，默认值为cn（中文）。HTML5应用类型默认支持简体中文、繁体中文、英文语言。
          language: 'cn',
          //内部网络请求的超时时间。一般情况建议保持默认值（10000ms）。
          timeout: _this.timeout,
          //允许服务器超时重复次数，默认5次。
          retryTimes: _this.retryTimes,
          //验证通过后，验证码组件是否自动隐藏，默认不隐藏（false）。
          bannerHidden: _this.bannerHidden,
          //是否默认不渲染，默认值false。当设置为true时，不自动渲染，需要自行调用show方法进行渲染。
          initHidden: false,
          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          callback: function (data) {
            console.log('###########滑动验证##########')
            console.log(nc_token)
            console.log(data)
            _this.$emit('sliderData',{
              token: nc_token,
              sessionid: data.csessionid,
              sig: data.sig
            })
            console.log('############################')
          },
          error: function (s) {}
        })
        window.NoCaptcha.setEnabled(true)
        //请务必在此处调用一次reset()方法。
        nc.reset()
        //用于配置滑动验证的自定义文案。详细信息，请参见自定义文案与多语言文档。
        window.NoCaptcha.upLang('cn', {
          //加载状态提示。
          'LOADING': _this.sliderData.loading,
          //等待滑动状态提示。
          'SLIDER_LABEL': _this.sliderData.sliderLabel,
          //验证通过状态提示。
          'CHECK_Y': _this.sliderData.checkY,
          //验证失败触发拦截状态提示。
          'ERROR_TITLE': _this.sliderData.errorTitle
        })
      },
      // 智能
      intelligenceInit() {
        let _this = this
        window.NVC_Opt = {
          //应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey:'CF_APP_1',
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: _this.scene,
          //声明二次验证需要渲染的目标元素ID。
          renderTo:'#captcha',
          //业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。
          trans: {"key1": "code0","nvcCode":600},
          //当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。
          elements: [
              '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
              '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
          ], 
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的背景图像（自动应用平铺填充的方式）。
          bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流）。
          bg_front: '',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的图标资源。
          obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的图标资源。
          obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，用于自定义文案。详细配置方法请参见自定义文案文档。
          upLang:{"cn":{
              _ggk_guide: "请摁住鼠标左键，刮出两面盾牌",
              _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
              _ggk_loading: "加载中",
              _ggk_fail: ['呀，盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
              }
          }
        }
      },
      intelligence() {
        var ic = new smartCaptcha({
          //声明智能验证需要渲染的目标元素ID。
          renderTo: '#sc',
          //智能验证组件的宽度。
          width: 300,
          //智能验证组件的高度。
          height: 42,
          //智能验证组件初始状态文案。
          default_txt: '点击按钮开始智能验证',
          //智能验证组件验证通过状态文案。
          success_txt: '验证成功',
          //智能验证组件验证失败（拦截）状态文案。
          fail_txt: '验证失败，请在此点击按钮刷新',
          //智能验证组件验证中状态文案。
          scaning_txt: '智能检测中',
          //前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          success: function(data) {
            console.log(NVC_Opt.token);
            console.log(data.sessionId);
            console.log(data.sig);
          },
          fail: function() {
            console.log('ic error');
          }
        });
        ic.init();
      }
    }
  }
</script>
<style lang="less" scoped>
  #__nc {
    // margin-left: auto;
    // margin-right: auto;
    width: 80%;
    height: 100px;
    padding-top: 100px;
    #sc {
      margin: 0;
    }
  }
</style>